<template>
  <div class="box">
    <div class="box2">
      <div class="content">
        <div class="content-search">
          <!-- 状态查询框1 -->
          <el-select v-model="values" clearable class="selet">
            <el-option
              v-for="item in options"
              :key="item.values"
              :label="item.labels"
              :value="item.values"
            ></el-option>
          </el-select>
          <!-- 日期选择框1 -->
          <el-date-picker
            v-model="value1"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择开始日期"
          >
          </el-date-picker>
          <!-- 日期选择框2 -->
          <el-date-picker
            v-model="value2"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择结束日期"
          >
          </el-date-picker>
          <!-- 搜索按钮 -->
          <el-button type="primary" icon="el-icon-search" @click="searchclick">搜索</el-button>
        </div>
    <!-- 表单 --> 
 
        <div class="content-tab">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
            :row-style="{ height: '38.5px' }"
            :header-cell-style="headerStyle"
            :cell-style="typecolor" 
            :default-sort = "{prop: 'date', order: 'descending'}"
            
          >
            <el-table-column  prop="id" label="记录ID" width="110" align="center"  sortable>
            </el-table-column>
            <el-table-column   prop="type" label="类型" width="109"  align="center"  sortable >
            </el-table-column> 
            <el-table-column prop="card_dealer_name" width="109" label="卡商名称"  align="center" >
            </el-table-column>
            <el-table-column prop="card_firm" width="180" label="卡商号" align="center"  >
            </el-table-column>
            <el-table-column prop="order_number" width="180" label="订单号" align="center" :show-overflow-tooltip="true"  >
            </el-table-column>
            <el-table-column prop="amount_before_change" width="109" label="变动前金额" align="center" >
            </el-table-column>
            <el-table-column prop="variable_amount" width="109" label="变动金额" align="center" >
            </el-table-column>
            <el-table-column prop="amount_after_change" width="109" label="变动后金额" align="center" >
            </el-table-column>
            <el-table-column prop="notes" width="109" label="备注" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column width="180" label="操作时间" align="center" >
                <template slot-scope="scope">
                  {{$timer(scope.row.operating_time)  }}
                </template>
            </el-table-column>
          </el-table>
        </div>
    <!-- 分页 -->
        <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes=" [10, 20, 30, 40, 50, 60]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            background
            >
            </el-pagination>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

      options: [
        {
          values: "0",
          labels: "账变类型",
        },
        {
          values: "1",
          labels: "入金账变",
        },
        {
          values: "2",
          labels: "代付账变",
        },
        {
          values: "3",
          labels: "手动上分",
        },
        {
          values: "4",
          labels: "手动下分",
        },
        {
          values: "5",
          labels: "提现",
        },
        {
          values: "6",
          labels: "冲正",
        },
        {
          values: "7",
          labels: "其他",
        },
      ],
      values: "0",

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
 
        //   充值金额
        input1: '',
        // 表单
        tableData: [],

     // 分页
      currentPage4: 1,
    // 总条数
      count: 0,
    // 每页条数
    pageSizeaa:10,
    
    };
  },
  methods:{
    headerStyle() {
      return {
        background: "#f2f2f2",
        height: "38.5px",
        padding: "5px 0",
        textAlign: "center",
        borderColor:"#e6e6e6",
        color: "#666",
        fontSize: "14px",
      };
    },
    // 分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSizeaa = val
        console.log("当前页:",this.pageSizeaa)
        this.$axios({
        url:'/system/agent/pmm/funddetails/queryFundDetail',
        method: 'GET',
        params:{
          currentPage : this.currentPage4,
          pageSize : this.pageSizeaa
        }
      })
      .then(({data}) => {
        console.log(data)
        this.tableData = data.data
        console.log("每页多少条:",this.tableData)
        this.count = data.count
      })
      .catch(err => {
        console.log(err)
      })
  
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
        this.currentPage4 = val
        console.log("当前条数:",this.pageSizeaa);
        this.$axios({
        url:'/system/agent/pmm/funddetails/queryFundDetail',
        method: 'GET',
        params:{
          currentPage : this.currentPage4,
          pageSize : this.pageSizeaa
        }      
      })
      .then(({data}) => {
        console.log(data)
        this.tableData = data.data
        console.log("每页多少条:",this.tableData)
        this.count = data.count

      })
      .catch(err => {
        console.log(err)
      })
      
    },
    // 不同内容显示不同颜色,类型渲染
    typecolor(row){
        if(row.row.type == 1  && row.column.label === "类型" ){
            return row.row.type ="入金账变"
        }else if(row.row.type == 2  && row.column.label === "类型" ){
            return row.row.type ="代付账变"
        }else if(row.row.type == 3  && row.column.label === "类型" ){
            return row.row.type ="手动上分"
        }else if(row.row.type == 4  && row.column.label === "类型" ){
            return row.row.type ="手动下分"
        }else if(row.row.type == 5  && row.column.label === "类型" ){
            return row.row.type ="提现"
        }else if(row.row.type == 6  && row.column.label === "类型" ){
            return row.row.type ="冲正"
        }else if(row.row.type == 7  && row.column.label === "类型" ){
            return row.row.type ="其他"
        } else if(row.row.type == "入金账变" && row.column.label === "类型" ){
            return "color: #ff0000"
        }else if(row.row.type == "代付账变"  && row.column.label === "类型" ){
            return "color: #00CCFF"
        }else if(row.row.type == "冲正"  && row.column.label === "类型" ){
            return "color: #ff0000"
        }else if(row.row.type == "提现"  && row.column.label === "类型" ){
            return "color: #ff0000"
        }else if(row.row.variable_amount > 0  && row.column.label === "变动金额" ){
            return "color: #62ff00"
        }else if(row.row.variable_amount == 0  && row.column.label === "变动金额" ){
            return "color: black"
        }else if(row.row.variable_amount < 0  && row.column.label === "变动金额" ){
            return "color: #ff0000"
        } 
    },

    // 搜索接口
    searchclick(){
      this.$axios({
      url:'/system/agent/pmm/funddetails/findFundDetail',
      method: 'GET',
      params:{
        endTime : this.value2,
        startTime : this.value1,
        type: this.values  ,
        currentPage : this.currentPage4,
        pageSize : 10  
        }  
    })
    .then(res => {
      console.log(this.value1)
      console.log(this.value2)
      console.log(this.values)
      console.log(res)
      this.tableData = []
      this.tableData.push(...res.data.data)
    })
    .catch(err =>{
      console.log(err)
    })
  }
    
  },
  mounted(){
    this.$axios({
      url:'/system/agent/pmm/funddetails/queryFundDetail',
      method: 'GET',
      params:{
        currentPage : this.currentPage4,
        pageSize : 10
      }
    })
    .then(({data}) => {
      console.log(data)
      this.tableData = data.data
      console.log("资金明细:",this.tableData)
      this.count = data.count

    })
    .catch(err => {
      console.log(err)
    })
  }
};
</script>

<style lang="scss" scoped>
.box {
  padding: 15px;
}
.box2 {
  padding: 7.5px;
  background: #fff;
}
.content {
  padding: 10px 296px 10px 15px;
  color: #666;
}

//搜索
.content-search {
  width: 800px;
  display: flex;
  justify-content: space-around;
}
.input-search {
  width: 182px;
}
.el-select-dropdown__item.selected {
  background-color: #5fb878;
  color: #fff;
}
.el-select-dropdown__item {
  color: #666666;
  padding: 0 10px;
}
.selet {
  color: #666666;
  margin-right: 15px;
}
.el-button--primary {
  background-color: #009688;
  border: #009688;
}
// 表单
.content-tab{
    margin-top: 20px;
}


// 分页
.block{
    border: 1px solid #e6e6e6;
    padding: 7px ;
}

</style>>

